<template>
  <div class="notice-list">
    <swiper
      :indicator-dots="false" :autoplay="true" :vertical="true" :circular="true"
      @change="onSwiperItemChange">
      <swiper-item v-for="(item, i) in listData" :key="i">
        <div class="list">
          <div class="list-inner">
            <div class="image">
              <img :src="item.headimgurl" mode="aspectFill"/>
            </div>
            <div class="intro">
              <div class="intro-inner">
                <span v-if="item.op === 'join'">{{item.nickname}}刚刚参与了抽奖</span>
                <span v-if="item.op === 'win'">{{item.nickname}}抽中了{{item.content}}</span>
              </div>
            </div>
          </div>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
export default {
  props: {
    listData: {
      type: Array,
      default: []
    }
  }
}
</script>

<style lang="less" scoped>
.notice-list {
  swiper {
    height: 76rpx;
  }
  .list {
    padding: 10rpx 0;
    &-inner {
      display: flex;
      align-items: center;
      .image {
        padding: 8rpx 0 8rpx 8rpx;
        background-color: rgba(0, 0, 0, 0.5);
        border-top-left-radius: 28rpx;
        border-bottom-left-radius: 28rpx;
        img {
          display: block;
          width: 40rpx;
          height: 40rpx;
          border-radius: 50% 50%;
        }
      }
      .intro {
        flex: 1;
        &-inner {
          display: inline-block;
          padding: 16rpx 20rpx 16rpx 8rpx;
          background-color: rgba(0, 0, 0, 0.5);
          border-top-right-radius: 28rpx;
          border-bottom-right-radius: 28rpx;
        }
        span {
          display: inline-block;
          font-size: 24rpx;
          height: 24rpx;
          line-height: 1.0;
          color: #fff;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
      }
    }
  }
}
</style>

